<template>
	<div class="visualization">
		<h1>电影官网可视化大屏</h1>
		<div class="echarts-box">
			<movieCharts class="echarts-box-item"></movieCharts>
			<articleRank class="echarts-box-item"></articleRank>
			<websiteCharts class="echarts-box-item"></websiteCharts>
			<movieClickCharts class="echarts-box-item"></movieClickCharts>
		</div>
	</div>

</template>

<script setup>
import movieCharts from '../components/charts/movieCharts.vue'
import websiteCharts from '../components/charts/websiteCharts.vue'
import movieClickCharts from '../components/charts/movieClickCharts.vue'
import articleRank from '../components/table/articleRank.vue'
</script>

<style lang="scss" scoped>
.visualization {
	width: 100%;
	min-width: 100vw;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);

	h1 {
		text-align: center;
		color: white;
	}
	// 修改表格默认样式
	:deep(.el-table__header-wrapper >.el-table__header > thead >tr) {
		background-color: #7f8c8d;
		color: white;
	}

	:deep(.el-table tr:nth-of-type(odd)) {
		background-color: #2c3e50;
		color: rgb(143, 143, 143);
	}

	:deep(.el-table tr:nth-of-type(even)) {
		background-color: #34495e;
		color: #CCC;
	}

	:deep(.el-table th.el-table__cell) {
		background-color: rgba(0, 0, 0, 0);
	}

	:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
		background-color: rgba(0, 0, 0, 0);
	}

	:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
		border-bottom: 1px solid white;
	}

	.echarts-box {
		width: 100%;
		min-width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;

		.echarts-box-item {
			flex: 30%;
			flex-shrink: 0;
			min-width: 0;
		}
	}
}
</style>